<template>
    <IContent :spinShow="loading">
        <ISearch v-model="search">
            <Row>
                <FormItem label="订单类型">
                    <RadioGroup v-model="search.type" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio label="0">一单一品</Radio>
                        <Radio label="1">一单多品</Radio>
                    </RadioGroup>
                </FormItem>
            </Row>
            <Row>
                <FormItem label="波次状态">
                    <RadioGroup v-model="search.status" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio label="0">待生成</Radio>
                        <Radio label="1">待下架</Radio>
                        <Radio label="2">待打包</Radio>
                        <Radio label="3">待发货</Radio>
                        <Radio label="4">已发货</Radio>
                    </RadioGroup>
                </FormItem>
            </Row>
            <FormItem label="订单号">
                <Input size="small" v-model="search.number" :rows="1"></Input>
            </FormItem>
            <FormItem label="仓单号">
                <Input size="small" v-model="search.code" :rows="1"></Input>
            </FormItem>
            <FormItem label="客户名称">
                <RemoteSelect url="common/select/customer" v-model="search.customer_id" size="small"></RemoteSelect>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                <Button type="error" icon="ios-add" size="small" @click="openComponent('Wellen')">自动生成波次</Button>
                <Button type="warning" icon="ios-add" @click="submitForWellen" size="small">选择生成波次</Button>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange" @on-selection-change="selectionChange">
            <template slot-scope="{ row, index }" slot="customer">
                <span>{{row.customer.name}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="order_code">
                <span>{{row.order.code}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="order_number">
                <span>{{row.order.number}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="type">
                <span v-if="row.type === 0">一单一品</span>
                <span v-if="row.type === 1">一单多品</span>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <span v-if="row.status === 0">待生成</span>
                <span v-if="row.status === 1">待下架</span>
                <span v-if="row.status === 2">待打包</span>
                <span v-if="row.status === 3">待发货</span>
                <span v-if="row.status === 4">已发货</span>
            </template>
            <template slot-scope="{ row, index }" slot="order_created_at">
                <span>{{row.order.created_at}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button size="small">查看</Button>
            </template>
        </ITable>

        <component :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentDrawer from "../../../mixins/contentDrawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import expandRow from './tableExpand.vue';
    import Wellen from './wellen'

    export default {
        name: "index",
        components: {RemoteSelect, ITable, ISearch, IContent, expandRow, Wellen},
        mixins: [contentListPage, contentDrawer],
        data() {
            return {
                table: {
                    columns: [{
                        type: 'selection',
                        width: 60,
                    },
                        {
                            title: '详情',
                            type: 'expand',
                            width: 50,
                            render: (h, params) => {
                                return h(expandRow, {
                                    props: {
                                        orderProduct: params.row.order.products
                                    }
                                })
                            }
                        },
                        {
                            title: '客户代码',
                            slot: 'customer'
                        },
                        {
                            title: '仓单号',
                            slot: 'order_code'
                        },
                        {
                            title: '订单号',
                            slot: 'order_number'
                        },
                        {
                            title: '订单类型',
                            slot: 'type'
                        },
                        {
                            title: '波次状态',
                            slot: 'status'
                        },
                        {
                            title: '出货单仓库时间',
                            key: 'created_at'
                        },
                        {
                            title: '订单创建时间',
                            slot: 'order_created_at'
                        },
                        {
                            title: '操作',
                            slot: 'action'
                        }
                    ]
                },
                search: {},
                selections: []
            }
        },
        methods: {
            getLists(page) {
                this.loading = true;
                this.$http.get(`order/shipment`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    data.data.map((res) => {
                        if(res.status !== 0){
                            res._disabled = true;
                        }else{
                            res._disabled = false;
                        }
                    });
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            selectionChange(v){
                this.selections = v.map((res) => res.id);
            },
            submitForWellen(){
                this.loading = true;
                this.$http.post(`order/shipment/choose`, {ids: this.selections}).then(() => {
                    this.getLists();
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
